<template>
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="工单编号：">
          <el-input v-model="searchForm.taskCode" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单状态">
          <el-select v-model="searchForm.status" clearable placeholder="请选择">
            <el-option label="待办" value="1" />
            <el-option label="进行" value="2" />
            <el-option label="取消" value="3" />
            <el-option label="完成" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"><i class="el-icon-search" />  查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container">

      <div class="role-operate">
        <el-button class="newBuild" type="warning" @click="showAddDialog=true">
          <i class="el-icon-circle-plus-outline" />
          新建</el-button>
        <el-button class="gdConfig" type="warning" @click="dialogVisible = true">工单配置</el-button>
      </div>
      <!-- 工单配置 -->
      <el-dialog
        title="工单配置"
        :visible.sync="dialogVisible"
        width="640px"
        style="font-size: 16px;
        font-weight: 600;
        color: #333;"
        class="gdDialog"
      >
        <div class="dialogBody">
          <div class="diaText">补货警戒线：</div>
          <el-input-number
            v-model="inputNum"
            controls-position="right"
            size="middle"
            style="width: 70%;
            display: flex;
            margin-left:10px;
            flex-direction: column"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-row type="flex" justify="center">
            <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
            <el-button size="mini" type="warning" @click="dialogVisible = false">确 定</el-button>
          </el-row>
        </span>
      </el-dialog>

      <!-- 放置table组件 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <!-- 放置列 -->
        <el-table-column align="center" width="50" prop="index" label="序号" />
        <el-table-column align="center" width="200" prop="taskCode" label="工单编号" />
        <el-table-column align="center" prop="innerCode" label="设备编号" />
        <el-table-column align="center" prop="taskType.typeName" label="工单类型" />
        <el-table-column align="center" label="工单方式">
          <template v-slot="{ row }">
            <span>  {{ row.createType === 1 ? "手动" : '自动' }} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="taskStatusTypeEntity.statusName" label="工单状态" />
        <el-table-column align="center" label="运营人员" prop="userName" />
        <el-table-column align="center" prop="updateTime" label="创建日期" />
        <el-table-column align="center" label="操作">
          <template v-slot="{row}">
            <el-button type="text" @click="details(row.taskId)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="footer">
        <span>共{{ res.totalCount }}条记录  第 {{ res.pageIndex }}/{{ res.totalPage }} 页</span>
        <el-row type="flex" style="height:60px" align="middle" justify="end">
          <el-button :disabled="res.pageIndex <= 1" @click="redNum">上一页</el-button>
          <el-button :disabled="res.pageIndex===res.totalPage" @click="addNum">下一页</el-button>
        </el-row>
      </div>
    </div>

    <addTask
      :show-add-dialog.sync="showAddDialog"
    />
    <viewdetails
      :details-visible.sync="detailsVisible"
      :task-detail="taskDetail"
      @showAdd="showAdd"
    />
  </div>
</template>

<script>
import addTask from '@/views/task/components/addtask.vue'
import viewdetails from '@/views/task/components/viewdetails.vue'
import { getTaskSearch, getTaskdetail } from '@/api/task'
export default {
  name: 'Approvals',
  components: {
    addTask,
    viewdetails
  },
  data() {
    return {
      inputNum: '55',
      tableData: [],
      input: '',
      formInline: {
        user: '',
        region: ''
      },
      showAddDialog: false,
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: false
      },
      searchForm: {
        taskCode: '',
        status: ''
      },
      res: '',
      dialogVisible: false,
      detailsVisible: false,
      taskId: '',
      taskDetail: {}
    }
  },
  async created() {
    // const res = await getTaskSearch()
    // console.log(res.currentPageRecords)
    // console.log(res)
    // this.tableData = res.currentPageRecords
    this.getTaskSearch()
  },
  methods: {
    async onSubmit() {
      const res = await getTaskSearch(this.searchForm)
      console.log(res)
      this.tableData = res.currentPageRecords
    },
    showAdd() {
      this.showAddDialog = true
    },
    async details(id) {
      this.detailsVisible = true
      // console.log(id)
      this.taskId = id
      const taskDetail = await getTaskdetail(this.taskId)
      console.log(taskDetail)
      this.taskDetail = taskDetail
    },
    async getTaskSearch() {
      const res = await getTaskSearch({ ...this.pageParams })
      // console.log(res)
      this.tableData = res.currentPageRecords
      this.res = res
      this.tableData.forEach((item, index) => { // 序号调整
        this.$set(item, 'index', this.pageParams.pageSize * (this.pageParams.pageIndex - 1) + index + 1)
      })
    },
    async addNum() {
      this.pageParams.pageIndex++
      this.getTaskSearch()
    },
    async redNum() {
      this.pageParams.pageIndex--
      this.getTaskSearch()
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 100%;
  height: 1050px;
  padding-left: 20px;
      .header{
    display: flex;
    height: 64px;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
    margin-top: 20px;
    .demo-form-inline{
      margin-top: 20px;
    }
    }
  .app-container{
      width: 100%;
      height: 900px;
      .role-operate{
        margin-bottom: 20px;
        .newBuild{
          width: 80px!important;
          height: 36px;
          padding: 0;
          background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
          border: none;
          margin-left: 18px;
          margin-top: 20px;
        }
        .gdConfig{
          width: 80px!important;
          height: 36px;
          padding: 0;
          background-color: #fbf4f0!important;
          border: none;
          color: #655b56!important;
        }
      }
      .footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32px 26px;
        span{
          font-size: 16px!important;
          color: #dbdfe5!important;
        }
        .el-button{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70px;
          height: 32px;
          margin: 0 16px;
          border-radius: 2px;
          background-color: #d5ddf8
        }
      }
      .dialogBody{
        display: flex;
        align-items: center;
        height: 36px;
        .diaText{
          font-size: 14px;
          font-weight: normal;
          color: #606266;
          margin-left: 20px;
        }
        .diaRight input{
            display: flex;
            width: 356px;
            height: 36px;
            line-height: 36px;
            margin-left: -40px;
            border-color: #d8dde3;
            border-radius: 4px;
            border: 1px solid #d8dde3;
            text-align: center;
        }
      }
  }
}
</style>
